<template>
	<view>
		<u-popup v-model="isShow" mode="bottom" height="60%" @close="close">
			<view class="pop-ct">
				<view class="list">
					<view class="address flex-row align-start" v-for="i in list" :key="i.id" @click="select(i)">
						<image :src="`../../static/images/ad${selectedId==i.id?'2':'1'}.png`" style="width: 32rpx;height: 32rpx;margin: 4rpx 8rpx 0 0;"></image>
						<view style="width:580rpx;">
							<view class="flex-row align-center u-line-1">
								<view class="name">{{i.name}}</view>
								<view class="tel">{{i.mobile}}</view>
								<view class="df" v-if="i.is_default==1">默认</view>
							</view>
							<view class="pos u-line-2">{{i.province+i.city+i.district+i.detail}}</view>
						</view>
					</view>
				</view>
				<u-gap height="120"></u-gap>
				<view class="btm">
					<my-btn gold @click="add">添加地址</my-btn>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			},
			df: {
				type: Number
			}
		},
		data() {
			return {
				isShow: false,
				list: [],
				selectedId: 0
			};
		},
		watch: {
			show(val) {
				if (val) {
					this.isShow = true
					this.getList()
				}
			}
		},
		mounted() {
			this.getList()
		},
		methods: {
			getList() {
				this.$u.get('/address/list').then(res => {
					this.list = res.data.result.address
					if (!this.selectedId) {
						let item = this.list.find(item => item.id==this.df)
						this.select(item)
					}
				})
			},
			select(item) {
				this.selectedId = item.id
				this.$emit('select', item)
			},
			close() {
				this.$emit('close', this.isShow)
			},
			add() {
				this.isShow = false
				this.$goto('/pages/address/add')
			}
		}
	}
</script>

<style lang="scss">
	.pop-ct {
		position: relative;
		height: 100%;
		
		.address {
			width:750rpx;
			background:rgba(255,255,255,1);
			padding: 26rpx 40rpx;
			.name {
				font-size:28rpx;
				font-family:PingFangSC-Medium,PingFang SC;
				font-weight:500;
				color:rgba(51,51,51,1);
				line-height:40rpx;
				margin-right: 24rpx;
			}
			.tel {
				font-size:24rpx;
				font-family:PingFangSC-Regular,PingFang SC;
				font-weight:400;
				color:rgba(153,153,153,1);
				line-height:36rpx;
			}
			.pos {
				font-size:24rpx;
				font-family:PingFangSC-Regular,PingFang SC;
				font-weight:400;
				color:rgba(153,153,153,1);
				line-height:36rpx;
				margin-top: 8rpx;
			}
			
			.df {
				width:70rpx;
				height:28rpx;
				background:rgba(238,188,128,1);
				border-radius:4rpx;
				text-align: center;
				margin-left: 24rpx;
				font-size:22rpx;
				font-family:PingFangSC-Medium,PingFang SC;
				font-weight:500;
				color:rgba(255,255,255,1);
				line-height:30rpx;
			}
		}
		
		.btm {
			position: fixed;
			width: 100%;
			padding: 24rpx;
			bottom: 0;
			background: #fff;
		}
	}
</style>
